<f:view xmlns="http://www.w3.org/1999/xhtml"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:p="http://primefaces.org/ui"
        xmlns:pm="http://primefaces.org/mobile"        
        contentType="text/html"
        renderKitId="PRIMEFACES_MOBILE">

    <pm:page title="Components">

        <style>
                .th-groups th {
                        text-align: center;
                        background-color: rgba(0,0,0,.1);
                        border-right: 1px solid #fff;
                }
                .ui-li-custom .ui-li-count {
                        right: 10px !important;
                }                
        </style>        
        
        <!-- Main View -->
        <pm:view id="main">  
            
            <pm:header title="Mobile" swatch="b"/>

            <pm:content>                

                <h:panelGrid columns="2" styleClass="ui-responsive"> 

                    <p:outputPanel style="padding-right: 15px">
                        <h:form>
                            <p:dataList type="inset" styleClass="ui-li-custom">
                                <f:facet name="header">Components</f:facet>
                                <f:attribute name="icon" value="false" />
                                <h:outputLink value="#forms">Forms <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                                <h:outputLink value="#buttons">Buttons</h:outputLink>
                                <h:outputLink value="#lists">Lists<h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>                                
                                <h:outputLink value="#navbar">NavBar</h:outputLink>
                                <h:outputLink value="#panels">Panels <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                                <h:outputLink value="#overlays">Overlays <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                                <h:outputLink value="#growl">Growl</h:outputLink>
                                <p:commandLink action="calendar?faces-redirect=true" ajax="false">Calendar <h:outputText styleClass="ui-li-count" value="New"/></p:commandLink>                        
                                <h:outputLink value="#autoComplete">AutoComplete <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                                <h:outputLink value="#dataTable">DataTable <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                                <p:commandLink action="fileUpload?faces-redirect=true" ajax="false">File Upload <h:outputText styleClass="ui-li-count" value="New"/></p:commandLink>                        
                                <h:outputLink value="#contextMenu">ContextMenu <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                            </p:dataList>
                        </h:form>
                    </p:outputPanel>

                    <p:outputPanel style="padding-right: 15px">                                                                      
                        <p:dataList type="inset" styleClass="ui-li-custom">
                            <f:facet name="header">Framework</f:facet>
                            <f:attribute name="icon" value="false" />
                            <h:outputLink value="#ajaxStatus">Ajax Status</h:outputLink>
                            <h:outputLink value="#ajaxUpdate">Ajax Updates</h:outputLink>
                        </p:dataList>

                        <p:dataList type="inset" styleClass="ui-li-custom">
                            <f:facet name="header">Navigation</f:facet>
                            <f:attribute name="icon" value="false" />
                            <h:outputLink value="#navHandler">Navigation Handler <h:outputText styleClass="ui-li-count" value="New"/></h:outputLink>
                            <h:outputLink value="#transitions">Transitions</h:outputLink>
                        </p:dataList>
                    </p:outputPanel>

                </h:panelGrid>     

            </pm:content>
            
            <pm:footer swatch="c">
                <h1 style="font-size: x-small" >#{build.primefacesVersion}</h1>		
                <h1 style="font-size: x-small" >#{build.primefacesMobileVersion}</h1>		
            </pm:footer>            

        </pm:view>

        <!-- Forms -->
        <pm:view id="forms">
            <pm:header title="Forms">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <p:inputText label="Input:" />

                <h:form>
                    <p:inputText id="search" label="Search:" type="search"/>
                </h:form>
                
                <p:inputText label="Phone:" type="tel"/>

                <p:inputTextarea id="inputTextarea" label="Textarea:"/>

                <pm:field>
                    <h:outputLabel for="selectOneMenu" value="Dropdown: "/>
                    <h:selectOneMenu id="selectOneMenu"> 
                       <f:selectItem itemLabel="Select One" itemValue="" />
                        <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                        <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                        <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                    </h:selectOneMenu>
                </pm:field>
                
                <p:selectManyMenu id="selectManyMenu" label="ManyMenu: ">                      
                    <f:selectItem itemLabel="Choose a few options:" itemValue="" />  
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />  
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />  
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />  
                </p:selectManyMenu>                                                 

                <pm:inputRange id="range" minValue="0" maxValue="100" label="Range:" />
                
                <pm:field>                
                    <div data-role="rangeslider">
                        <h:outputLabel for="range_a" value="DualSlider:"/>    
                        <pm:inputRange id="range_a" minValue="0" value="40" maxValue="100" />
                        <h:outputLabel for="range_b" value="DualSlider:"/>
                        <pm:inputRange id="range_b" minValue="0" value="80" maxValue="100" />
                    </div>
                </pm:field>

                <pm:switch id="switch" onLabel="yes" offLabel="no" label="Switch:" />

                <p:selectBooleanCheckbox id="booleanCheckbox" value="false" itemLabel="I agree" label="Checkbox"/>

                <p:selectManyCheckbox id="checkbox" label="Checkboxes: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectManyCheckbox>
                
                <p:selectManyCheckbox id="manyButton" label="ManyButtons: " layout="lineDirection" >
                    <f:selectItem itemLabel="B" itemValue="Bold" />  
                    <f:selectItem itemLabel="I" itemValue="Italic" />  
                    <f:selectItem itemLabel="U" itemValue="Underline" /> 
                </p:selectManyCheckbox>                                                

                <p:selectOneRadio id="radio" label="Radios: ">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>
                
                <p:selectOneRadio id="oneButton" label="OneButtons: " layout="lineDirection">
                    <f:selectItem itemLabel="Option 1" itemValue="Option 1" />
                    <f:selectItem itemLabel="Option 2" itemValue="Option 2" />
                    <f:selectItem itemLabel="Option 3" itemValue="Option 3" />
                </p:selectOneRadio>                
                               
            </pm:content>

        </pm:view>


        <!-- Buttons -->
        <pm:view id="buttons">
            <pm:header title="Buttons">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <h3>Basic</h3>
                <p:commandButton value="Default" type="button"/>
                <p:commandButton value="With Icon" type="button" icon="check"/>
                <p:commandButton value="Icon Position" type="button" icon="refresh" iconPos="right"/>
                <p:commandButton value="Inline" type="button" icon="delete" inline="true" />

                <h3>Themes</h3>
                <p:commandButton value="Default" type="button">
                    <f:attribute name="swatch" value="a" />
                </p:commandButton>
                <p:commandButton value="With Icon" type="button" icon="check">
                    <f:attribute name="swatch" value="b" />
                </p:commandButton>
                <p:commandButton value="Icon Position" type="button" icon="refresh" iconPos="right">
                    <f:attribute name="swatch" value="e" />
                </p:commandButton>

                <h3>Grouping</h3>
                <pm:buttonGroup>
                    <p:commandButton value="Yes" type="button" icon="check"/>
                    <p:commandButton value="No" type="button" icon="delete"/>
                </pm:buttonGroup>

                <pm:buttonGroup orientation="horizontal">
                    <p:commandButton value="Yes" type="button" icon="check" />
                    <p:commandButton value="No" type="button" icon="delete" />
                </pm:buttonGroup>

            </pm:content>

        </pm:view>
        
        <!-- Lists -->
        <pm:view id="lists">
            <pm:header title="Lists">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <h3>Read-Only</h3>
                <p:dataList>
                    <h:outputText value="Item 1" />
                    <h:outputText value="Item 2" />
                    <h:outputText value="Item 3" />
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Links</h3>
                <p:dataList>
                    <h:outputLink value="#lists">Item 1</h:outputLink>                    
                    <p:separator>Divider</p:separator>                    
                    <h:outputLink value="#lists">Item 2 <f:attribute name="icon" value="false" /> </h:outputLink>                    
                    <h:outputLink value="#lists">Item 3 <f:attribute name="icon" value="delete" /> </h:outputLink>
                    <h:outputLink value="#lists">Item 4 <f:attribute name="icon" value="info" /> </h:outputLink>                    
                </p:dataList>

                <p:spacer height="10em" />

                <h3>Inset</h3>
                <p:dataList type="inset">
                    <h:outputLink value="#lists">Item 1</h:outputLink>
                    <h:outputLink value="#lists">Item 2</h:outputLink>
                    <h:outputLink value="#lists">Item 3</h:outputLink>
                </p:dataList>
                
                <p:spacer height="10em" />

                <h3>Filter+AutoDividers</h3>
                <p:dataList>
                    <f:attribute name="filter" value="true" />
                    <f:attribute name="autoDividers" value="true" />
                    <h:outputText value="Barcelona" />
                    <h:outputText value="Istanbul" ><f:attribute name="filterText" value="PrimeFaces"/></h:outputText>
                    <h:outputText value="New York" />
                    <h:outputText value="Paris" />
                </p:dataList>

                <p:spacer height="10em" />
                
                <h3>Client-Side AutoComplete</h3>
                <p:dataList>                    
                    <f:attribute name="filter" value="true" />
                    <f:attribute name="autoComplete" value="true" />
                    <h:outputText value="Barcelona" />
                    <h:outputText value="Istanbul" />
                    <h:outputText value="New York" />
                    <h:outputText value="Paris" />
                </p:dataList>                
                
                <p:spacer height="10em" />
                                
                <h3>Custom Content</h3>
                <p:dataList value="#{ringBean.players}" var="player">  
                    <f:attribute name="iconSplit" value="true" />                    
                    <h:outputLink value="#lists">
                        <f:attribute name="icon" value="gear" />
                        <p:graphicImage value="/images/barca/#{player.photo}" />
                        <h2>#{player.name}</h2>                                                
                        <p>#{player.position}</p>                                                                        
                        <h:outputText styleClass="ui-li-count" value="#{player.number}" />                                                
                    </h:outputLink>
                    <h:outputLink value="#lists"></h:outputLink>
                </p:dataList>
                
                <p:spacer height="10em" />
                
                <h3>Lazy Load</h3>
                <p:dataList paginator="true" rows="5" value="#{tableBean.cars}" var="car"> 
                    <f:attribute name="paginatorText" value="More Cars.." />
                    <h:outputLink value="#lists">                                                
                        <h2>#{car.model}</h2>                                                
                        <p><strong>#{car.color}</strong></p>   
                        <p>#{car.manufacturer}</p>                        
                        <p class="ui-li-aside" >#{car.year}</p>                        
                    </h:outputLink>                    
                </p:dataList>                
                
            </pm:content>

        </pm:view>        

        <!-- NavBar -->
        <pm:view id="navbar">
            <pm:header title="NavBar">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
                <pm:navBar>
                    <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active ui-state-persist"/>
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                </pm:navBar>
            </pm:header>

            <pm:content>
                <pm:navBar>
                    <p:button value="Home" icon="home" href="#main?reverse=true" styleClass="ui-btn-active ui-state-persist"/>
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                    <p:button value="Favs" icon="star" href="#main?reverse=true" />
                    <p:button value="Setup" icon="gear" href="#main?reverse=true" />
                </pm:navBar>
            </pm:content>
        </pm:view>

        <!-- Panels -->
        <pm:view id="panels">
            <pm:header title="Panels">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                <h3>Panel</h3>
                <p:panel header="Expanded">
                    Toggle panel content
                </p:panel>

                <p:panel header="Collapsed" collapsed="true">
                    Initially collapsed content
                </p:panel>

                <h3>Accordion Panel</h3>
                <h4>Simple</h4>
                <p:accordionPanel>
                    <p:tab title="Title 1">
                        Content 1
                    </p:tab>
                    <p:tab title="Title 2">
                        Content 2
                    </p:tab>
                    <p:tab title="Title 3">
                        Content 3
                    </p:tab>
                </p:accordionPanel>
                <h4>Multiple</h4>
                <p:accordionPanel multiple="true">
                    <f:attribute name="inset" value="false"/>
                    <p:tab title="Title 1">
                        Content 1
                    </p:tab>
                    <p:tab title="Title 2">
                        Content 2
                    </p:tab>
                    <p:tab title="Title 3">
                        Content 3
                    </p:tab>
                </p:accordionPanel>   
                <h4>Model</h4>
                <p:accordionPanel value="#{tabBean.players}" var="player">  
                    <p:tab title="#{player.name}">  
                        <h:panelGrid columns="2" cellpadding="10">  
                            <h:outputText value="Name: " />  
                            <h:outputText value="#{player.name}" style="font-weight: bold"/>  

                            <h:outputText value="Number: " />  
                            <h:outputText value="#{player.number}" style="font-weight: bold"/>  

                            <h:outputText value="Position: " />  
                            <h:outputText value="#{player.position}" style="font-weight: bold"/>  
                        </h:panelGrid>  
                    </p:tab>  
                </p:accordionPanel>                

                <h3>Grid Layout</h3>

                <h4>2 Column</h4>
                <h:panelGrid columns="2">
                    <h:outputText value="Cell 1" />
                    <h:outputText value="Cell 2" />
                </h:panelGrid>

                <h4>3 Column</h4>
                <h:panelGrid columns="3">
                    <p:button value="Home" icon="home" href="#main?reverse=true" />
                    <p:button value="Info" icon="info" href="#main?reverse=true" />
                    <p:button value="Search" icon="search" href="#main?reverse=true" />
                </h:panelGrid>

                <h4>Responsive Columns</h4>
                <h:panelGrid columns="4" styleClass="ui-responsive">
                    <h:outputText value="Cell 1" />
                    <h:outputText value="Cell 2" />
                    <h:outputText value="Cell 3" />
                    <h:outputText value="Cell 4" />

                    <h:outputText value="Cell 5" />
                    <h:outputText value="Cell 6" />
                    <h:outputText value="Cell 7" />
                    <h:outputText value="Cell 8" />
                </h:panelGrid>

            </pm:content>
        </pm:view>

        <pm:view id="overlays">

            <p:overlayPanel for="frmOverlay:simplePanelBtn" widgetVar="panel" my="right" >
                <h3>Overlay Panel</h3>
                <h4>Flexible by design, Overlay Panel can be used for navigation, forms, inspectors and more.</h4>
                <h4>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</h4>
                <p:commandButton type="button" value="Close" icon="delete" onclick="PF('panel').hide()"/>                                
            </p:overlayPanel>                    

            <pm:header title="Overlays">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>                
            </pm:header>

            <pm:content>
                <h:form id="frmOverlay">
                    <p:growl id="messageOverlay" />

                    <p:commandButton type="button" value="Basic Dialog" onclick="PF('dlgBasic').show()"/>

                    <p:commandButton type="button" value="Modal Dialog" onclick="PF('dlgModal').show()"/>

                    <p:commandButton value="Confirm Dialog" actionListener="#{buttonBean.destroyWorld}" update="frmOverlay:messageOverlay">  
                        <p:confirm header="Confirmation" message="Are you sure?" icon="ui-icon-alert"/>  
                    </p:commandButton>                

                    <p:commandButton id="simplePanelBtn" type="button" value="Simple Overlay Panel"/>                                

                    <p:dialog header="Header" widgetVar="dlgBasic">
                        Dialog Content goes here...
                    </p:dialog>

                    <p:dialog header="Cities" widgetVar="dlgModal" modal="true">                    
                        <p:dataList type="inset">                              
                            <f:attribute name="filter" value="true" />
                            <h:outputText value="Barcelona" />
                            <h:outputText value="Istanbul" />
                            <h:outputText value="New York" />
                            <h:outputText value="Paris" />                        
                        </p:dataList>                        
                    </p:dialog>

                    <p:confirmDialog global="true">                      
                        <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" inline="true" icon="check">
                            <f:attribute name="swatch" value="b"/>                                
                        </p:commandButton>  
                        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" inline="true" icon="delete"/>                                                            
                    </p:confirmDialog>                
                </h:form>
            </pm:content>
        </pm:view>

        <pm:view id="growl">
            <pm:header title="Growl">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <h:form>  
                    <p:growl id="growlMsg" />  
                    
                    <p:commandButton value="Info" actionListener="#{messagesController.addInfo}" update="growlMsg"/>  
                    <p:commandButton value="Warn" actionListener="#{messagesController.addWarn}" update="growlMsg"/>  
                    <p:commandButton value="Error" actionListener="#{messagesController.addError}" update="growlMsg"/>  
                    <p:commandButton value="Fatal" actionListener="#{messagesController.addFatal}" update="growlMsg"/>  
                </h:form>

            </pm:content>
        </pm:view> 
        
        <pm:view id="autoComplete">
            <pm:header title="AutoComplete">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <h:form>  
                    <p:growl id="growl" />  
                    
                    <h3>Simple</h3>
                    <p:autoComplete  completeMethod="#{autoCompleteBean.complete}"/>

                    <h3>Min Length</h3> 
                    <p:autoComplete  completeMethod="#{autoCompleteBean.complete}" minQueryLength="3" />                    
                    
                    <h3>Delay(2000)</h3> 
                    <p:autoComplete  completeMethod="#{autoCompleteBean.complete}" queryDelay="2000" /> 
                    
                    <h3>Max Results(5)</h3> 
                    <p:autoComplete  completeMethod="#{autoCompleteBean.complete}" maxResults="5" />                   
                    
                    <h3>Basic Pojo</h3>
                    <p:autoComplete  completeMethod="#{autoCompleteBean.completePlayer}"  
                                    var="player" itemLabel="#{player.name}" itemValue="#{player}" converter="player">  
                        <p:ajax event="itemSelect" listener="#{autoCompleteBean.handleSelect}" update="growl" />  
                    </p:autoComplete>                         
                    
                </h:form>

            </pm:content>
        </pm:view> 
        
        <pm:view id="dataTable"> 
            <pm:header title="DataTable">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>                       
            <pm:content>   
                <h:form prependId="false" >

                    <h3>Table: Reflow</h3>
                    <p:dataTable var="car" value="#{tableBean.carsSmall}" > 
                        <p:column headerText="Model">  
                            <h:outputText value="#{car.model}" />
                        </p:column>  

                        <p:column headerText="Year">  
                            <h:outputText value="#{car.year}" />  
                        </p:column>  

                        <p:column headerText="Manufacturer">  
                            <h:outputText value="#{car.manufacturer}" />  
                        </p:column>  

                        <p:column headerText="Color">  
                            <h:outputText value="#{car.color}" />  
                        </p:column>  
                    </p:dataTable> 
                                                            
                    <h3>Table: Column Toggle</h3>
                    <p:dataTable var="car" value="#{tableBean.carsSmall}"> 
                        <f:attribute name="columnToggle" value="true" />
                        <f:attribute name="btnText" value="Colunas..." />                                                
                        <p:column headerText="Model">          
                            <f:attribute name="priority" value="2" />
                            <h:outputText value="#{car.model}" />  
                        </p:column>  

                        <p:column headerText="Year" >                              
                            <h:outputText value="#{car.year}" />  
                        </p:column>  

                        <p:column headerText="Manufacturer">  
                            <f:attribute name="priority" value="1" />
                            <h:outputText value="#{car.manufacturer}" />  
                        </p:column>  

                        <p:column headerText="Color">  
                            <f:attribute name="priority" value="4" />
                            <h:outputText value="#{car.color}" />  
                        </p:column>                          
                    </p:dataTable> 
                    
                    <h3>Table: Heading groups</h3>
                    <p:dataTable id="salesTable" var="sale" value="#{tableBean.sales}">
                        <f:attribute name="columnToggle" value="true" />
                        <p:columnGroup type="header">  
                            <p:row>
                                <p:column headerText="" />  
                                <p:column colspan="2" headerText="Sales Count" >
                                    <f:attribute name="priority" value="2" />
                                </p:column>  
                                <p:column colspan="2" headerText="Profit">
                                    <f:attribute name="priority" value="1" />
                                </p:column>  
                            </p:row>
                        </p:columnGroup>  

                        <p:column headerText="Manufacturer">  
                            #{sale.manufacturer}  
                        </p:column>  

                        <p:column headerText="Last Year">  
                            #{sale.lastYearProfit}%  
                        </p:column>  

                        <p:column headerText="This Year">  
                             #{sale.thisYearProfit}%  
                        </p:column>  

                        <p:column headerText="Last Year">  
                             #{sale.lastYearSale}$  
                        </p:column>  

                        <p:column headerText="This Year">  
                            #{sale.thisYearSale}$  
                        </p:column>                            
                    </p:dataTable>                    
                    
                </h:form>
            </pm:content>
        </pm:view>   
        
        <pm:view id="contextMenu">
            <pm:header title="Context Menu">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                ContextMenu is a overlay menu that can be attached to any other JSF component. By default contextMenu attaches itself to the view itself.                
                
                <p:dataList type="inset">                    
                    <f:facet name="header">Context Menu</f:facet>
                    <h:outputLink value="#contextMenuBasic">Basic Context Menu </h:outputLink>                    
                    <h:outputLink value="#contextMenuTiered">Tiered Context Menu</h:outputLink>                    
                    <h:outputLink value="#contextMenuDataList">DataList Integration</h:outputLink>                                                            
                    <h:outputLink value="#contextMenuWithoutCont">Without Content</h:outputLink>                                                           
                </p:dataList>                

            </pm:content>
        </pm:view>     
        
        <pm:view id="contextMenuBasic">
            <pm:header title="Basic Context Menu">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <p:growl id="growlmsg" />  
                ContextMenu can be used well to attache mobile events like swipe,swipeleft,swiperight,taphold(Default).               
                Swipe anywhere on this page to view the context-menu options.
                
                <p:contextMenu event="swipe" style="min-width:210px">                    
                    <h:form>  
                        <p:dataList type="inset" >
                            <f:facet name="header" >Choose an action</f:facet>
                            <p:commandLink value="Save" icon="edit" actionListener="#{buttonBean.save}" update=":growlmsg" />  
                            <p:commandLink value="Update" icon="refresh" actionListener="#{buttonBean.update}" update=":growlmsg" />  
                            <p:commandLink value="Delete" icon="delete" actionListener="#{buttonBean.delete}" update=":growlmsg" />                           
                        </p:dataList>                     
                    </h:form>
                </p:contextMenu>                                      

            </pm:content>
        </pm:view>   
        
        <pm:view id="contextMenuTiered">
            <pm:header title="Tiered Context Menu">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <p:growl id="growlTired" /> 

                ContextMenu can have nested submenus and menuitems.(Tap and Hold)                                                        

                <p:contextMenu>                    
                    <h:form>
                        <p:accordionPanel style="margin:0; width:250px;" activeIndex="">
                            <f:attribute name="swatch" value="b" />
                            <f:attribute name="contentSwatch" value="c" />
                            <f:attribute name="inset" value="false" />
                            <p:tab title="Ajax Menuitems" >                                                        
                                <p:dataList>                                                            
                                    <p:commandLink value="Save" icon="edit" actionListener="#{buttonBean.save}" update=":growlTired" />  
                                    <p:commandLink value="Update" icon="refresh" actionListener="#{buttonBean.update}" update=":growlTired" />                                                      
                                    <p:commandLink value="Delete" icon="delete" actionListener="#{buttonBean.delete}" update=":growlTired" />
                                </p:dataList>                        
                            </p:tab>
                            <p:tab title="Non-Ajax Menuitem">                               
                                <p:dataList>                                                                                
                                    <p:commandLink value="Showcase" action="showcase?faces-redirect=true" ajax="false" />   
                                </p:dataList>                                                     
                            </p:tab>
                            <p:tab title="Navigations">                            
                                <p:dataList>                                                                                
                                    <h:outputLink value="#forms" >Forms</h:outputLink>                           
                                    <h:outputLink value="#buttons" >Buttons</h:outputLink>
                                </p:dataList>                         
                            </p:tab>                    
                        </p:accordionPanel> 
                    </h:form>
                </p:contextMenu>                                      

            </pm:content>
        </pm:view>        
        
        <pm:view id="contextMenuDataList">
            <pm:header title="Context Menu DataList">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>    
                
                <p:contextMenu for="frm:listTap" style="min-width:210px">                                        
                    <h:form>  
                        <p:dataList type="inset" >
                            <f:facet name="header" >Choose an action</f:facet>
                            <p:commandLink value="View"  icon="search" update=":display" oncomplete="PF('carDialog').show()"/>
                            <p:commandLink value="Delete" icon="delete" actionListener="#{tableBean.deleteCar}" update=":frm:listTap"  />                            
                        </p:dataList>                     
                    </h:form>
                </p:contextMenu>                                             
                
                <h:form id="frm">
                    Datalist has special integration with context-menu.                                                 

                    <p:dataList id="listTap" style="margin-top:15px" value="#{tableBean.carsSmall}" var="car"> 
                        <f:facet name="header" >Tap and Hold</f:facet>                                                                                            
                        <h:outputLink value="#lists">                                         
                            <h2>#{car.model}</h2>                                                
                            <p><strong>#{car.manufacturer}</strong></p> 
                        </h:outputLink>

                        <p:outputPanel>
                            <p:column>    
                                <p:commandLink styleClass="selection">
                                    <f:setPropertyActionListener value="#{car}" target="#{tableBean.selectedCar}" />
                                </p:commandLink>                                                                            
                            </p:column>           
                        </p:outputPanel>    
                    </p:dataList>                
                </h:form>  
                
                <p:dialog header="Car Detail" widgetVar="carDialog">  
                    <p:outputPanel id="display" style="text-align: center;min-width: 200px" >                        

                        <h:panelGrid columns="2">  
                            <h:outputText value="Model:" />  
                            <h:outputText value="#{tableBean.selectedCar.model}" style="font-weight:bold"/>  

                            <h:outputText value="Year:" />  
                            <h:outputText value="#{tableBean.selectedCar.year}" style="font-weight:bold"/>  

                            <h:outputText value="Manufacturer:" />  
                            <h:outputText value="#{tableBean.selectedCar.manufacturer}" style="font-weight:bold"/>  

                            <h:outputText value="Color:" />  
                            <h:outputText value="#{tableBean.selectedCar.color}" style="font-weight:bold"/>  
                        </h:panelGrid> 
                    </p:outputPanel>
                </p:dialog>                

            </pm:content>
        </pm:view> 
        
        <pm:view id="contextMenuWithoutCont">
            
            <p:overlayPanel for="btnPanelContext" widgetVar="panelContext">
                <p:dataList>
                    <f:attribute name="filter" value="true" />
                    <f:attribute name="autoComplete" value="true" />
                    <f:attribute name="placeholder" value="Search" />
                </p:dataList>  
                <p:dataList styleClass="ui-li-custom">
                    <f:attribute name="swatch" value="a" />
                    <f:attribute name="dividerSwatch" value="d" />
                    <f:attribute name="icon" value="false" />
                    <h:outputLink>Primefaces</h:outputLink>
                    <p:separator>FAVORITES</p:separator>
                    <h:outputLink>News Feed</h:outputLink>
                    <h:outputLink>Messages<h:outputText styleClass="ui-li-count" value="6"/></h:outputLink>
                    <h:outputLink>Nearby</h:outputLink>
                    <h:outputLink>Events<h:outputText styleClass="ui-li-count" value="1"/></h:outputLink>
                    <h:outputLink>Friends</h:outputLink>
                    <p:separator>GROUPS</p:separator>
                    <h:outputLink>Create Group</h:outputLink>
                    <h:outputLink>Primefaces<h:outputText styleClass="ui-li-count" value="4"/></h:outputLink>                    
                    <p:separator>APPS</p:separator>
                    <h:outputLink>App Center</h:outputLink>
                    <h:outputLink>Chat</h:outputLink>
                    <h:outputLink>Like Pages<h:outputText styleClass="ui-li-count" value="+20"/></h:outputLink>
                    <h:outputLink>Find Friends<h:outputText styleClass="ui-li-count" value="19"/></h:outputLink>
                    <h:outputLink>Photos</h:outputLink>
                    <p:separator>&#160;</p:separator>
                    <h:outputLink>Help Center</h:outputLink>
                    <h:outputLink>Code Generator</h:outputLink>
                    <h:outputLink>Account Settings</h:outputLink>
                    <h:outputLink>Privacy Settings</h:outputLink>
                    <h:outputLink>Terms &amp; Polices</h:outputLink>
                    <h:outputLink>Report a Problem</h:outputLink>
                    <h:outputLink onclick="PrimeFaces.back()">Log Out</h:outputLink>
                </p:dataList>                                
            </p:overlayPanel>             
            
            <pm:header title="Context Menu Without Content">
                <f:facet name="left"><p:button id="btnPanelContext" value="" iconPos="notext" icon="bars"/></f:facet>
            </pm:header>

            <pm:content>
                Context Menu without content can be used to trigger any javaScript code.(Swipe Right)
                <p:contextMenu event="swiperight" beforeShow="PF('panelContext').show()" />                                      
            </pm:content>
        </pm:view>        

        <pm:view id="target">
            <pm:header title="Target">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()" /></f:facet>
            </pm:header>

            <pm:content>

                <h1>Target View</h1>

            </pm:content>
        </pm:view>

        <pm:view id="transitionTarget">
            <pm:header title="Transition">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>

                <h1>Displayed with a transition.</h1>

            </pm:content>
        </pm:view>

        <!-- Ajax Status -->
        <pm:view id="ajaxStatus">
            <pm:header title="Ajax Status">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                Core PrimeFaces Ajax implementation is integrated with jQuery Mobile's built-in ajax loading dialog indicator.

                <h:form>

                    <p:commandButton value="Count" actionListener="#{counterBean.increment}" update="txt_count" process="@this"/>
                    <h3><h:outputText id="txt_count" value="Counter: #{counterBean.count}" /></h3>

                </h:form>

            </pm:content>
        </pm:view>

        <!-- Ajax Update -->
        <pm:view id="ajaxUpdate">
            <pm:header title="Ajax Update">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                jQuery Mobile uses progressive enhancement on page elements to optimize them for mobile environment. This happens
                on page load and elements lose styles/behaviors attached after an ajax update. PrimeFaces fixes this mismatch
                by providing extensions whereas client side ajax of a JSF implementation causes various problems.              
                
                <h:form>

                    <pm:field>
                        <h:outputLabel for="txt" value="Text:" />
                        <p:inputText id="txt" value="#{showcaseView.text}" />
                    </pm:field>                    

                    <p:commandButton value="PrimeFaces" actionListener="#{showcaseView.add}" update="txt txts" process="@form"/>                    
                    
                    <p:dataList id="txts" var="text" value="#{showcaseView.texts}" type="inset">
                        <f:facet name="header">Values</f:facet>
                            #{text}
                    </p:dataList>

                </h:form>
            </pm:content>
        </pm:view>

        <!-- Navigation Handler -->
        <pm:view id="navHandler">
            <pm:header title="Navigation">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                View Navigation is integrated with JSF Navigation Model. Prepending the action outcome with "pm:" enables
                mobile view-to-view navigations.

                <h:form>

                    <p:commandButton value="Go to Target" action="#{showcaseView.navigate}" />
                    <p:commandButton value="Go to Single Page" action="singlePage?faces-redirect=true" ajax="false"/>
                    <p:button value="Go with Lazy Load" href="#singlePage?lazyLoad=true"/>
                                       
                </h:form>

            </pm:content>
        </pm:view>

        <!-- Transitions -->
        <pm:view id="transitions">
            <pm:header title="Transitions">
                <f:facet name="left"><p:button value="Back" icon="back" onclick="PrimeFaces.back()"/></f:facet>
            </pm:header>

            <pm:content>
                Various animation types are supported in view navigations.

                <p:button value="Fade" href="#transitionTarget?transition=fade" />

                <p:button value="Pop" href="#transitionTarget?transition=pop" />

                <p:button value="Flip" href="#transitionTarget?transition=flip" />

                <p:button value="Turn" href="#transitionTarget?transition=turn" />

                <p:button value="Flow" href="#transitionTarget?transition=flow" />
                
                <p:button value="SlideFade" href="#transitionTarget?transition=slidefade" />                

                <p:button value="Slide" href="#transitionTarget?transition=slide" />

                <p:button value="SlideUp" href="#transitionTarget?transition=slideup" />

                <p:button value="SlideDown" href="#transitionTarget?transition=slidedown" />

                <p:button value="None" href="#transitionTarget?transition=none" />

            </pm:content>
        </pm:view>
        
    </pm:page>

</f:view>